<template>
  <div id="app">
    <div class="main">
      <!-- 头部组件 -->
     <header-nav v-if="$route.meta.Headers"></header-nav>
     <!-- 路由视图 -->
     <keep-alive include="search,recommend">
        <router-view 
        @get-player-id="getPlayerId"
        @get-play-all-id="getPlayAllId"
        @get-play-singer-all-id = "getPlaySingerAllId"
        ></router-view>
     </keep-alive>
     <!-- 播放音乐器 -->
      <player @get-player-id="getPlayerId" :playerId='playerId' :list-id="listId" :listSingerId='listSingerId'></player>
    </div>
  </div>
</template>

<script>
  import player from '@/components/base/player'
  import headerNav from '@/components/base/header'
  export default {
    data() {
      return {
        playerId:null,
        listId:null,
        listSingerId:null,
        listAlbumAllId:null,
      }
    },
    components:{
      headerNav,
      player
    },
    methods: {
      getPlayerId(id){
        this.playerId = id;
      },
      getPlayAllId(id){
        this.listId = id;
        },
      getPlaySingerAllId(id){
        this.listSingerId= id;
      },
    },
    created() {
    },
  }
</script>
<style lang="less">
  @import './assets/css/reset_css.css'; 
  .main{
    min-width: 320px;
    max-width: 750px;
    margin: 0 auto;
  }
</style>